<template>
  <el-form
    ref="userGroupForm"
    label-position="right"
    size="mini"
    :rules="rules"
    :model="data"
    label-width="80px"
  >
    <el-row>
      <el-col :span="11">
        <el-form-item label="用户组名" prop="emgname">
          <el-input v-model="data.emgname" />
        </el-form-item>
      </el-col>

      <el-col :span="11" :offset="1">
        <el-form-item label="组分类" prop="emgtype">
          <el-select v-model="data.emgtype" placeholder="请选择">
            <el-option
              v-for="(item, index) in groupTypeList"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="11">
        <el-form-item label="组说明" prop="detail">
          <el-input v-model="data.detail" type="textarea" autosize />
        </el-form-item>
      </el-col>
      <el-col :span="11" :offset="1">
        <el-form-item label="排序" prop="order">
          <el-input v-model="data.order" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="11">
        <el-form-item label="备注" prop="remark">
          <el-input v-model="data.remark" type="textarea" autosize />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import { defineComponent, getCurrentInstance } from "@vue/composition-api";
import { groupTypeList } from "./states";

export default defineComponent({
  props: {
    // 表单
    data: {
      type: Object,
      required: true,
    },
  },

  setup(_, ctx) {
    const that = getCurrentInstance();

    function submit() {
      that.refs["userGroupForm"].validate((valid) => {
        if (valid) {
          ctx.emit("submit");
        }
      });
    }

    return {
      groupTypeList,
      // 新增表单规则
      rules: {
        emgname: [
          { required: true, message: "用户组名不能为空", trigger: "blur" },
        ],
        emgtype: [
          { required: true, message: "用户组类别不能为空", trigger: "blur" },
        ],
        detail: [
          { required: true, message: "用户组说明不能为空", trigger: "blur" },
        ],
      },

      submit,
    };
  },
});
</script>
